<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="right-top-sign"></view>
		<view class="left-top-sign">Login</view>
		<u--text type="primary" text="欢迎回来！(*^_^*)" style="padding: 50upx;" size="20"></u--text>
		<view style="display: flex;justify-content: center;padding: 50upx;">
			<u--form labelPosition="left" :model="FormData" ref="form" style="width: 500rpx;">
				<u-form-item label="电话:" prop="mobile" borderBottom ref="item1">
					<u--input prefixIcon="account" v-model="FormData.mobile" border="none" clearable
						placeholder="请输入电话"></u--input>
				</u-form-item>
				<u-form-item label="密码:" prop="password" borderBottom ref="item2">
					<u--input prefixIcon="lock" v-model="FormData.password" border="none" password clearable
						placeholder="请输入密码"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-button type="primary" text="登录" :custom-style="{ 'width': '500rpx','margin-top':'60rpx' }" @click="toLogin()"
			shape="circle" :disabled="logining" :loading="logining"></u-button>
		<view class="forget-section">
			忘记密码?
		</view>
		<view class="register-section">
			还没有账号?
			<text @click="toRegist">注册账号</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return { // 基础表单数据
				FormData: {
					mobile: null,
					password: null,
				},
				logining: false,
				// 校验规则
				rules: {
					mobile: {
						required: true,
						message: '请输入电话'
					},
					password: {
						required: true,
						message: '请输入密码'
					}
				},
			}
		},
		onLoad() {

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				
			},
			async toLogin() {
				try {
					await this.$refs.form.validate();
					this.logining = true;
					const {
						mobile,
						password
					} = this;
					const sendData = {
						mobile,
						password
					};
					const result = await httpsend('userInfo',JSON.stringify(this.FormData));
					if (result?.code === 1) {
						this.logining = false;
						this.login(result.data);
						uni.navigateBack();
					} else {
						this.$api.msg(result.msg);
						this.logining = false;
					}
				} catch (err) {
					console.log('err', err);
					this.logining = false;
				}
			}
		},

	}
</script>

<style lang='scss'>
	.container {
		position: relative;
		width: 100vw;
		height: 94vh;
		overflow: hidden;
		background: #fff;
	}

	.left-top-sign {
		font-size: 120upx;
		color: #f8f8f8;
		position: relative;
		left: -30upx;
	}

	.right-top-sign {
		position: absolute;
		top: 40upx;
		right: -90upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 800upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(35deg);
			border-radius: 0 0 0 0;
		}

		&:after {
			position: absolute;
			right: -250upx;
			top: 0;
			transform: rotate(35deg);
			border-radius: 0 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		bottom: -350upx;
		left: 100upx;
		border: 100upx solid #71d9a5;
		border-radius: 30%;
		padding: 180upx;
	}


	.forget-section {
		font-size: 26upx;
		color: red;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: 26upx;
		color: #606266;
		text-align: center;

		text {
			color: #4399fc;
			margin-left: 10upx;
		}
	}
</style>